<template>
	<view>
		<view class="form-box">
			<u-form labelPosition="top" labelStyle="color:#ffffff" :labelWidth="200" :model="formData">
				<u-form-item :label="getStr('my.withdrawal.address')" prop="withdrawAddress">
					<u-input v-model="formData.withdrawAddress" disabledColor="#262930"
						:placeholder="getStr('my.withdrawal.placeholderAddress')" color="#ffffff" placeholderStyle="color:#666666"
						border="none">
					</u-input>
				</u-form-item>
				<u-form-item :label="getStr('my.withdrawal.comment')" prop="comment">
					<u-input v-model="formData.comment" disabledColor="#262930" :placeholder="getStr('my.withdrawal.placeholderRemarks')"
						color="#ffffff" placeholderStyle="color:#666666" border="none">
					</u-input>
				</u-form-item>
				<u-form-item :label="getStr('my.withdrawal.stars')" prop="withdrawAmount">
					<u-input v-model="formData.withdrawAmount" disabledColor="#262930"
						:placeholder="getStr('my.withdrawal.placeholderAddress')" color="#ffffff" placeholderStyle="color:#666666"
						border="none" @change="withdrawAmountFn"></u-input>
				</u-form-item>
				<u-form-item :label="getStr('my.withdrawal.TONreceived')" prop="witTon">
					<u-input v-model="formData.witTon" disabledColor="#262930" :placeholder="getStr('my.withdrawal.placeholderAddress')"
						color="#ffffff" placeholderStyle="color:#666666" border="none">
						<template #suffix>
							<image src="/static/images1/index/refresh-icon.png" style="width: 24rpx; height: 24rpx;"
								@click="withdrawAmountFn"></image>
						</template>
					</u-input>
				</u-form-item>
			</u-form>
		</view>

		<view class="instructions-box">
			<view class="title-box">{{ getStr('my.withdrawal.tipstit') }}</view>
			<view class="content">
				<text>{{ getStr('my.withdrawal.tips1') }}</text>

				<text>{{ getStr('my.withdrawal.tips2') }}</text>

				<text>{{ getStr('my.withdrawal.tips3') }}</text>
			</view>
		</view>

		<view class="btn-box">
			<u-button customStyle="border-radius:12rpx;height:100rpx;font-weight: 500;font-size: 32px;color: #FFFFFF;"
				:text="getStr('confirm')" color="linear-gradient(90deg, #30272A 0%, #DAA8B7 100%)"
				@click="modalShow = true"></u-button>
		</view>
		
		<pwdModel :show="modalShow" :title="getStr('prompt')" @close="modalShow = false" @confirm="confirmWithdrawFn"></pwdModel>
	</view>
</template>

<script setup>
	import pwdModel from '@/components/confirmModal/payPwd.vue'
	import {
		ref,
		reactive
	} from 'vue'
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		getWithdrawAmount,
		confirmWithdraw
	} from '@/common/api/common.js'
	
	const modalShow = ref(false)
	
	const formData = reactive({
		withdrawAddress: '',
		comment: '',
		withdrawAmount: '',
		witTon: ''
	})
	const isRender = ref(true)

	const withdrawAmountFn = async (e) => {
		console.log(e)
		const res = await getWithdrawAmount({
			withdrawAmount: e || formData.withdrawAmount
		})
		if (res.code == 200) {
			formData.witTon = res.data.witTon
		}
	}

	const confirmWithdrawFn = async (pwd) => {
		const res = await confirmWithdraw({
			...formData,
			telegramId: uni.getStorageSync('telegramId'),
			payPass:pwd
		})
		if (res.code == 200) {
			uni.$u.toast(getStr('toast.successfully'))
			uni.navigateTo({
				url:'/pages/my/detailOfAssets/index'
			})
		}else{
			uni.$u.toast(res.message)
		}
	}

	const getStr = (key) => {
		return uni.$t(key)
	}
	const setIsRender = () => {
		isRender.value = false
		setTimeout(() => {
			isRender.value = true
		}, 50)
	}

	onShow(() => {
		uni.$tg.showButton()
		setIsRender()
	})
</script>
<style>
	page {
		background: #1C1E23;
	}
</style>
<style lang="scss" scoped>
	.code-img {
		width: 280rpx;
		height: 280rpx;
		margin: 50rpx auto 0;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #1C1C25;
		border: 1rpx solid #55555F;
		border-radius: 12rpx;
	}

	.form-box {
		width: calc(100vw - 28rpx - 28rpx);
		padding-top: 56rpx;
		margin: 0 auto;

		::v-deep .u-form-item {
			margin-bottom: 20rpx;

			text {}
		}

		::v-deep .u-form-item__body__left {
			margin-bottom: 24rpx;
		}

		::v-deep .u-form-item {
			margin-bottom: 0;
		}

		::v-deep .u-form-item__body {
			padding: 0 0 50rpx;
		}

		::v-deep .u-input {
			background-color: #262930;
			height: 88rpx;
			padding: 0 18rpx 0 28rpx !important;
			box-sizing: border-box;
			font-size: 28rpx;
		}
	}

	.instructions-box {
		width: calc(100% - 28rpx - 28rpx);
		margin: 0 auto;
		background-color: #262930;
		border-radius: 16rpx;

		.title-box {
			height: 80rpx;
			border-bottom: 1rpx dashed #FFFFFF80;
			padding: 0 30rpx;
			box-sizing: border-box;
			line-height: 80rpx;
			font-weight: 800;
			font-size: 32rpx;
			color: #FFFFFF;
		}

		.content {
			color: #ffffff80;
			font-size: 24rpx;
			line-height: 38rpx;
			padding: 28rpx 28rpx 10rpx;

			text {
				display: block;
				margin-bottom: 38rpx;
			}
		}
	}

	.btn-box {
		width: calc(100% - 28rpx - 28rpx);
		margin: 48rpx auto 0;
		padding-bottom: calc(28rpx + env(safe-area-inset-bottom));
	}

	::v-deep .u-popup__content {
		background: #FFFFFF;
		border-radius: 12rpx;

		::v-deep .u-modal {
			::v-deep .u-modal__title {
				padding-top: 42rpx;
				font-family: DIN;
				font-weight: 500;
				font-size: 36rpx;
				color: #000000;
				opacity: 0.8;
			}
			
			::v-deep .u-modal__content {
				width: 500rpx;
				display: block;
			
				::v-deep .slot-content {
					display: flex;
					padding-top: 28rpx;
					padding-bottom: 73rpx;
					flex-direction: column;
			
					::v-deep .content {
						font-family: DIN;
						font-weight: bold;
						font-size: 48rpx;
						color: #212121;
						line-height: 28rpx;
					}
			
					::v-deep .btn-wrap {
						width: 400rpx;
						display: flex;
					}
				}
			}
		}

		::v-deep .u-modal__button-group,
		.u-line {
			display: none;
		}

		.btn {
			width: 249px;
			height: 88px;
			background: linear-gradient(90deg, #30272A 0%, #DAA8B7 100%);
			border-radius: 16px;
			opacity: 0.2;
		}
	}
</style>